<template>
  <div>
    <div class="search">
      <div class="content">
        <div class="part1">
          <div class="item">
            <span class="name">名字</span>
            <el-input
              v-model="detail.title"
              class="input margin-left"
              placeholder="名字"
              maxlength="20"
              @keyup.enter.native="search"
            />
          </div>
          <div class="searchItem">
            <el-button type="success" round class="search-btn" @click="getList">搜索</el-button>
            <el-button round class="reset-btn" style="margin-left:20px;" @click="reset">重置</el-button>
            <el-button round class="add" style="margin-left:20px;" @click="$router.push({path:'/member/add',query:{type:4}})">新增</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="table margin-top padding-bottom">
      <el-table
        ref="multipleTable"
        empty-text="暂无数据"
        :data="list"
        style="width: 100%"
        :row-style="{background: '#FCFDFF'}"
        :header-cell-style="{background:'#46705D',color:'#ffffff'}"
        @select-all="handleSelectAll"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column fixed type="index" label="序号" :show-overflow-tooltip="true" align="center" />
       <!-- <el-table-column label="头像" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <template slot-scope="scope">
              <div></div>
			  {{scope.row.headPortrait}}
            </template>
          </template>
        </el-table-column> -->
		<el-table-column label="头像" :show-overflow-tooltip="true" align="center">
		  <template slot-scope="scope">
		    <div><img style="width: 80px;height: 80px;" :src="scope.row.headPortrait" alt=""></div>
		  </template>
		</el-table-column>
        <el-table-column label="昵称" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.nickName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="账号" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.account }}</div>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.email }}</div>
          </template>
        </el-table-column>
        <el-table-column label="手机号" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.phone }}</div>
          </template>
        </el-table-column>
        <el-table-column label="状态" :show-overflow-tooltip="true" align="center">
          <template slot-scope="scope">
            <div>{{ scope.row.accountStatus==0?'启用':'禁用' }}</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" :show-overflow-tooltip="true" align="center" width="450">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toSee(scope.row)">查看</el-button>
            <el-button type="text" size="small" @click="toEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="changeStatus(scope.row,1)">启用</el-button>
            <el-button type="text" size="small" @click="changeStatus(scope.row,0)">禁用</el-button>
            <el-button type="text" size="small" @click="toDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pageContain margin-top">
        <div>
          <el-popover placement="right" trigger="hover" class="more">
            <div class="popover">
              <div class="item hand" @click="editStatusSingles(1)">启用</div>
              <div class="item hand" @click="editStatusSingles(0)">禁用</div>
              <div class="item hand" @click="toDels">删除</div>
            </div>
            <el-button slot="reference" class="moreDo">批量操作</el-button>
          </el-popover>
        </div>
		 <div style="flex: 1;text-align: right;">共{{pagination.total}}条</div>
        <el-pagination
          :current-page="pagination.page"
          :page-size="pagination.pageSize"
          :background="true"
          layout="prev, pager, next"
          :total="pagination.total"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { memberEnable, memberProhibit, memberList, memberDelete } from '@/api/api'
export default {
  data() {
    return {
      list: [],
      pagination: {
        pageSize: 10,
        page: 1,
        total: 0
      },
      detail: {
        postId: this.postId,
        showType: '',
        title: ''
      },
      statusOptions: [
        {
          value: null,
          label: '全部'
        },
        {
          value: 1,
          label: '正常'
        },
        {
          value: 0,
          label: '禁用'
        }],
      ids: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    changeStatus(item, type) {
      if (type == 1) {
        memberEnable(item.id).then(data => {
          Is.tip('已启用')
          this.getList()
        })
      }
      if (type == 0) {
        memberProhibit(item.id).then(data => {
          Is.tip('已禁用')
          this.getList()
        })
      }
    },
    toEdit(item) {
      this.$router.push({ path: '/member/add', query: { id: item.id, type: 4 }})
    },
    toSee(item) {
      this.$router.push({ path: '/member/see', query: { id: item.id, type: 4 }})
    },
    editStatusSingle(type, id) {
      if (type == 1) {
        // 启用
        updateHospitalStatus({
          ids: [id],
          status: 1
        }).then(data => {
          Is.tip('启用成功')
          this.getList()
        })
      }
    },
    editStatusSingles(type) {
      if (Is.empty(this.ids)) {
        Is.tip('未选择编辑项')
        return false
      }
      if (type == 1) {
        // 启用
        updateHospitalStatus({
          ids: this.ids,
          status: 1
        }).then(data => {
          Is.tip('启用成功')
          this.getList()
        })
      }
      if (type == 0) {
        // 禁用
        updateHospitalStatus({
          ids: this.ids,
          status: 0
        }).then(data => {
          Is.tip('禁用成功')
          this.getList()
        })
      }
    },
    reset() {
      this.detail = {
        postId: this.postId,
        showType: '',
        title: ''
      }
      this.pagination = {
        pageSize: 10,
        page: 1,
        total: 0
      }
      this.getList()
    },
    getList() {
      const params = {
        curPage: this.pagination.page,
        pageSize: this.pagination.pageSize,
        keyword: this.detail.title
      }
      memberList(params).then(({ data }) => {
        this.list = data.records
        this.pagination.total = data.total
        // this.list = data
      })
    },
    handleSelectAll(selection) {
      this.ids = []
      if (selection.length > 0) {
        selection.forEach(item => {
          this.ids.push(item.id)
        })
      }
    },
    handleCurrentChange(val) {
      // 重置当前页码
      this.pagination.page = val
      this.getList()
    },
    handleSelectionChange(selection) {
      this.ids = []
      if (selection.length > 0) {
        selection.forEach(item => {
          this.ids.push(item.id)
        })
      }
    },
    // 多选删除
    toDels() {
      if (Is.empty(this.ids)) {
        Is.tip('未选择删除项')
        return false
      }
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        memberDelete(
          this.ids
        ).then(data => {
          Is.tip('删除成功', 1500, 'success')
          if (this.list.length === this.ids.length && this.pagination.page > 1) {
            this.pagination.page--
          }
          this.getList()
        })
      })
    },
    // 单选删除
    toDel(id) {
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        memberDelete(
          [id]
        ).then(data => {
          Is.tip('删除成功', 1500, 'success')
          if (this.list.length === 1 && this.pagination.page > 1) {
            this.pagination.page--
          }
          this.getList()
        })
      }).catch((e) => {

      })
    }
  }}
</script>

<style lang="scss" scoped>

</style>
